import React, { Component } from 'react'
import Header from '../../components/header/Header'
import './mine.css'
import img1 from '../../assets/img/tou_02.jpg'
import img2 from '../../assets/img/red_envelopes.png'
import img3 from '../../assets/img/payment.png'
import img4 from '../../assets/img/pic8.png'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getbanner } from '../../store/modules/mine'
import {getinfo} from '../../store/modules/login'
import { Carousel } from "antd-mobile";

class Mine extends Component {
    componentDidMount() {
        let { mine: { reqbanner } } = this.props
        reqbanner()
    }
    render() {
        let { banner,info} = this.props
        console.log(info);
        return (
            <div className='Main'>
                <Header title='我的'></Header>
                <div className="head clearfix">
                    <div className="left fl">
                        <img src={img1} alt="" className='fl' />
                        <div className="fl">
                            <h2>{info.nickname}</h2>
                            <i>完善资料让小u更懂你</i>
                        </div>
                    </div>
                    <div className="right fr">
                        <img src={img2} alt="" />
                        <i>每日签到</i>
                    </div>
                </div>
                <div className="nav">
                    <ul className="top">
                        <li><i>12</i></li>
                        <li><i>12</i></li>
                        <li><i>&yen;0</i></li>
                        <li><i>12</i></li>
                    </ul>
                    <ul className="bottom">
                        <li><i>我的收藏</i></li>
                        <li><i>浏览记录</i></li>
                        <li><i>我的红包</i></li>
                        <li><i onClick={()=>this.props.history.push('/youhui')}>优惠券</i></li>
                    </ul>

                    <div className="cen">
                        <div className="top">
                            <h3>我的订单</h3>
                            < i>全部订单<em className="iconfont">&#xe63c;
                            </em></i>
                        </div>
                        <div className="bott">
                            <i>
                                <img src={img3} alt="" />
                                <p>待付款</p>
                            </i>
                            <i>
                                {/* <img src="./images/delivery.png" alt="pic"> */}
                                <img src={img3} alt="" />
                                <p>待收货</p>
                            </i>
                            <i>
                                {/* <img src="./images/evaluation.png" alt="pic"> */}
                                <img src={img3} alt="" />
                                <p>评价</p>
                            </i>
                            <i>
                                {/* <img src="./images/service.png" alt="pic"> */}
                                <img src={img3} alt="" />
                                <p>售后/退款</p>
                            </i>
                        </div>

                    </div>
                </div>
                <div className="lunbotu">
                        <Carousel autoplay={true} infinite>
                            {banner.map((item) => (
                                <img
                                    key={item.id}
                                    src={item.img}
                                    alt=""
                                    style={{ width: "100%", verticalAlign: "top" ,height:"86px"}}
                                />
                            ))}
                        </Carousel>
                </div>
                
                <div className="content-box">
                        <div className="box">
                            <img src={img4} alt="" />
                            <p>地址管理</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>我的钱包</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>我的二维码</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>我的小伙伴</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>0元适用</p>
                        </div>
                    </div>

            </div>
        )
    }
}

let mapStateToProps = state => ({
    banner: getbanner(state),
    info:getinfo(state)
})
let mapDispatchToProps = dispatch => ({
    mine: bindActionCreators(actions, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Mine)
